<template>
	<div class="cus-page flex-column" v-resize="onResize">
		<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
		<div class="flex-1 flex-column" ref="container" style="overflow: hidden">
			<van-search
				v-model="search.search_content"
				placeholder="请输入会员微信号/手机号/姓名"
				shape="round"
				@input="onSearch"
			/>
			<div class="cus-page-body">
				<ul class="cus-list">
					<li
						class="flex flex-align-center"
						v-for="item in list"
						:key="item.cus_id"
						@click="onClickItem(item)"
					>
						<div class="cus-avatar">
							<cl-avatar :src="item.cus_sex == 2 ? womenImg : menImg" />
							<img class="gender" :src="item.cus_sex == 2 ? girlImg : boyImg" />
						</div>
						<cl-flex1 class="pl-1 cus-info flex-column">
							<div class="flex name">
								<div class="flex-1 flex flex-align-center">
									<div class="ellipsis">{{ item.cus_name }}</div>
									<span class="tag plain danger" v-if="item.inherit_id">
										重粉
									</span>
								</div>
								<span class="name_ascr_op">{{ item.dept_name || "-" }}</span>
							</div>
							<div v-if="item.cus_mobile" class="flex flex-align-center">
								<icon-svg name="mobile" class="icon mobile" />
								<div class="ellipsis">{{ item.cus_mobile | privacyPhone }}</div>
							</div>
							<div v-if="item.cus_wx" class="flex flex-align-center">
								<icon-svg name="wechat" class="icon" />
								<div class="ellipsis">{{ item.cus_wx }}</div>
							</div>
						</cl-flex1>
					</li>
				</ul>
				<cl-empty
					v-if="!search.search_content && list.length == 0"
					tips="暂无数据，请输入关键字查询"
				/>
				<cl-empty v-if="search.search_content && empty">
					<template #tips>
						暂无此客户，是否<el-button type="text" @click="toAddCus">
							立即添加
						</el-button>
					</template>
				</cl-empty>
			</div>
		</div>
	</div>
</template>
<script>
	import { NavBar, Search, Dialog } from "vant";
	import debounce from "lodash/debounce";

	import womenImg from "@/assets/img/women.png";
	import menImg from "@/assets/img/men.png";
	import girlImg from "@/assets/img/girl.png";
	import boyImg from "@/assets/img/boy.png";
	export default {
		name: "m-cus-search",
		components: {
			VanNavBar: NavBar,
			VanSearch: Search
		},
		props: {
			title: String
		},
		data() {
			return {
				womenImg,
				menImg,
				girlImg,
				boyImg,
				loading: false,
				search: {
					search_type: 0, //搜索类型(0-全部 ,1-手机,2-客户名称,4-微信)
					search_content: "", //搜索名字
					biz_id: "", //事业部
					bra_id: "",
					company_id: "",
					pagesize: 50
				},
				list: [],
				empty: false
			};
		},
		created() {
			this.search.biz_id = this.getCurrBiz();
		},
		mounted() {
			this.onResize();
		},
		methods: {
			onResize() {
				this.$nextTick(() => {
					const { clientHeight } = this.$refs.container;
					this.$emit("resize", clientHeight);
				});
			},
			onClickLeft() {
				this.$emit("click-left");
			},
			// 后退
			goBack() {
				this.$router.go(-1);
			},
			// item点击
			onClickItem(item) {
				this.$emit("click-item", item);
			},
			onSearch: debounce(function () {
				this.getList();
			}, 500),
			// 获取列表
			async getList() {
				const { search_content } = this.search;
				this.empty = false;
				if (!search_content) {
					this.list = [];
					return;
				}
				this.loading = true;
				let url = this.title == "查找客户" ? "searchCus" : "searchCus";
				const list = await this.$service.customer[url](this.search).done(() => {
					this.loading = false;
				});
				// console.log(list.list.length);
				this.empty = (list.list && list.list.length == 0) || list.length == 0;
				// if (this.empty) {
				// 	Dialog.confirm({
				// 		title: "提示",
				// 		message: "暂无此客户，是否立即添加?",
				// 		confirmButtonColor: "#156DFF"
				// 	})
				// 		.then(() => {
				// 			this.toAddCus();
				// 		})
				// 		.catch(() => {});
				// }
				this.list = [];
				this.$nextTick(() => {
					this.list = list.list || list;
				});
			},
			// 新增客户
			toAddCus() {
				this.$router.push({
					path: "/mobile/cus/form"
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	::-webkit-scrollbar {
		// display: none;
		width: 1px;
	}

	::v-deep .van-nav-bar .van-icon {
		color: #333 !important;
	}
	.cus-page {
		height: 100%;
		overflow: hidden;

		&-body {
			position: relative;
			flex: 1;
			overflow: auto;
			background: #f2f3f5;
			&::before {
				border-top: 1px solid #ebedf0;
				position: absolute;
				box-sizing: border-box;
				content: " ";
				pointer-events: none;
				top: -50%;
				right: -50%;
				bottom: -50%;
				left: -50%;
				transform: scale(0.5);
				z-index: 10;
			}

			.cus-list {
				li {
					background: #fff;
					position: relative;
					padding: 10px;
					&::before {
						border-top: 1px solid #ebedf0;
						position: absolute;
						box-sizing: border-box;
						content: " ";
						pointer-events: none;
						top: -50%;
						right: -50%;
						bottom: -50%;
						left: -50%;
						transform: scale(0.5);
					}
					.cus-avatar {
						position: relative;
						height: 50px;
						width: 50px;
						.cl-avatar {
							height: 100%;
							width: 100%;
						}
						.gender {
							width: 12px;
							height: 12px;
							position: absolute;
							bottom: 0;
							right: -4px;
							border: 1px solid #fff;
							border-radius: 50%;
						}
					}
					.cus-info {
						color: #999;
						line-height: 20px;
						font-size: 14px;
						overflow: hidden;
						.name {
							color: #333;
							font-size: 15px;
							.tag {
								margin-left: 6px;
								zoom: 0.85;
							}
						}
						.name_ascr_op {
							color: #999;
							font-size: 14px;
							padding-left: 4px;
						}
						.icon {
							margin-right: 4px;
							&.mobile {
								width: 12px;
								height: 11px;
							}
						}
					}
				}
			}
		}
	}
</style>
